<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<canvas id="webgl" width="400" height="400"></canvas>

<script>
(function(){
    var canvas = document.getElementById('webgl');
    var gl = canvas.getContext('webgl');

    // shader source
    var VSHADER_SOURCE =
        `void main() {
            gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
            gl_PointSize = 20.0;
        }`;
    var FSHADER_SOURCE =
        `void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }`;

    // 创建 shader
    var vShader = gl.createShader(gl.VERTEX_SHADER);
    // 设置 shader 的 source
    gl.shaderSource(vShader, VSHADER_SOURCE);
    // 编译 shader
    gl.compileShader(vShader);

    var fShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fShader, FSHADER_SOURCE);
    gl.compileShader(fShader);

    // 创建程序 并附加 shader
    var program = gl.createProgram();
    gl.attachShader(program, vShader);
    gl.attachShader(program, fShader);
    // 连接程序到 webgl
    gl.linkProgram(program);

    // 本次绘制用到的作色程序
    gl.useProgram(program);
    // gl.program = program; // 这样写不行

    // 指定清空 canvas 的颜色
    gl.clearColor(0, 0, 0, .6);
    // 清空 canvas
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 绘制
    gl.drawArrays(gl.POINTS, 0, 1);
})();
</script>
</body>
</html>
